<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/4/23
  Time: 20:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
<div class="container">
    <div class="form row">
        <h2 class="text-center" style="color: #ad98bd;" >Login System</h2>
        <ul id="myTab" class="nav nav-tabs"  >
            <li class="active col-md-5 "style="position: relative;left: 40px;"><a href="#home" data-toggle="tab">账号登陆</a></li>
            <li class="col-md-5"style="position: relative;left: 10px;"><a href="#ios" data-toggle="tab" >短信登录</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div  class="row tab-pane fade in active "  id="home">
                <form class="form-horizontal col-md-offset-2 col-md-8" id="myform" >
                    <div class="form-group">
                        <i class="fa fa-user-o fa-lg"></i>
                        <div class="form-group">
                        <input  type="text" class="form-control"  name="username" placeholder="账户">
                        </div>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-user-secret fa-lg"></i>
                        <div class="form-group">
                        <input type="password" class="form-control" name="password1" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group" class="flex-between" style="position: relative;left:-15px">
                        <div class="checkbox">
                            <label> <input type="checkbox" >记住密码</label>
                            <a class="sign1 col-md-offset-5 " style="padding-left: 15px;position: relative;left: 15px"href="" >忘记密码</a>
                        </div>
                    </div>
                        <div class="col-md-offset-9 col-md-10"><button type="submit" class="btn btn-default login ">登录</button></div>
                    <hr style="position:relative; top:-5px;">
                </form>
            </div>
            <div  class="row tab-pane fade"  id="ios">
                <form class="form-horizontal col-md-offset-2 col-md-8" id="myform2" >
                    <div class="form-group">
                        <i class="fa fa-user-o fa-lg"></i>
                        <div class="form-group">
                        <input id="log-tel" class="form-control" type="number" name="tel" placeholder="手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-user-secret fa-lg"></i>
                        <div class="form-group">
                        <input type="number" name="veriy" class="form-control" placeholder="短信验证码">
                        </div>
                    </div>
                    <div class="form-group" style="display: flex; position: relative;top: 10px;">
                        <div class=" col-md-10"><button type="button" class="btn btn-default login ">获取验证码</button></div>
                        <div class="col-md-offset-3 col-md-10" style="position: relative;left: 10px;"><button type="submit" class="btn btn-default login ">登录</button></div>
                    </div>
                </form>
            </div>
        </div>
        <hr style="position:relative; top:-5px;width: 70% ;">
        <div style="font-size:0.9em;position:relative; top:-15px; " class="col-md-offset-1 form-group container" >.
            <div style="display: flex;">
                <span class="sign" style="padding-left: 10px">其他登录方式:&nbsp;&nbsp;</span>
                <a style="height: 25px; margin-right: 0.5em;" th:href="@{/oauth2/authorization/qq}" href="oauth2/authorization/qq" title="QQ登录">
                    <img th:src="@{/images/QQ.png}" src="../img/QQ.png">
                </a>
                <a style="height: 25px; margin-right: 0.5em;" th:href="@{/oauth2/authorization/weixin}" href="oauth2/authorization/weixin" title="微信登录">
                    <img th:src="@{/images/wechat.png}" src="../img/wechat.png">
                </a>
                <a style="height: 25px; margin-right: 0.5em;"  th:href="@{/oauth2/authorization/github}" href="oauth2/authorization/github" title="GitHub登录">
                    <img th:src="@{/images/github.png}" src="../img/github.png">
                </a>
                <a style="height: 25px; margin-right: 0.5em;"  th:href="@{/oauth2/authorization/dgut}" href="oauth2/authorization/dgut" title="东莞理工学院登录">
                    <img th:src="@{/images/dgut.png}" src="../img/dgut.png">
                </a>
                <a class="sign col-md-8" href="/register.jsp" >立刻注册</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script src="./dist/js/bootstrapValidator.min.js"></script>
<link href="./dist/css/bootstrapValidator.min.css" rel="stylesheet" />

<script>
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
    $(function () {
        $('#myform').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                password1: {
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码长度必须在6到18位之间'
                        },
                    }
                }
            }
        });
    });
    $(function () {
        $('#myform2').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                tel: {
                    message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机号不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机号长度必须为11位'
                        },
                        regexp: {
                            regexp: /^1[3456789]\d{9}$/,
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入正确手机号'
                        }
                    }
                },
                veriy: {
                    validators: {
                        notEmpty: {
                            message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;验证码不能为空'
                        },
                    }
                }
            }
        });
    });
</script>